<template>
  <v-container>
    <v-stepper v-model="e1" style="background-color: #e0e0e0" flat>
      <v-row>
        <v-col cols="1"></v-col>
        <v-col cols="1">
          <v-img src="../../assets/logo.png"/>
        </v-col>
        <v-col><span class="text-h6">MAGIC_SHROOM</span> </v-col>
        <v-col cols="6">
          <v-stepper-header class="elevation-0">
            <v-stepper-step
                :complete="e1 > 1"
                step="1"
            >
              拍下商品
            </v-stepper-step>

            <v-divider></v-divider>

            <v-stepper-step
                :complete="e1 > 2"
                step="2"
            >
              进行付款
            </v-stepper-step>

            <v-divider></v-divider>

            <v-stepper-step
                :complete="e1 > 3"
                step="3">
              确认收货
            </v-stepper-step>

            <v-divider></v-divider>

            <v-stepper-step step="4">
              评论
            </v-stepper-step>
          </v-stepper-header>
        </v-col>
      </v-row>
      <v-stepper-items>
        <v-stepper-content step="1">
          <v-card
              color="#e0e0e0"
              flat
          >
            <v-card-text>
              <v-row justify="center">
                <v-col
                    cols="12"
                >
                  <v-sheet
                      elevation="2"
                  >
                    <v-sheet
                        class="pa-3 primary"
                        dark
                    >
                      <v-row>
                        <v-col cols="2">
                          <span class="text-h6">选择收货地址</span>
                        </v-col>
                        <v-col cols="2">
                          <v-row justify="center">
                            <v-dialog
                                v-model="dialog"
                                persistent
                                max-width="600px"
                            >
                              <template v-slot:activator="{ on, attrs }">
                                <v-btn
                                    text
                                    class="mt-2"
                                    v-bind="attrs"
                                    v-on="on">
                                  <v-icon>mdi-content-save-cog-outline</v-icon>
                                  添加新地址
                                </v-btn>
                              </template>
                              <v-card>
                                <v-card-title>
                                  <span class="text-h5">User Profile</span>
                                </v-card-title>
                                <v-card-text>
                                  <v-container>
                                    <v-row>
                                      <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                      >
                                        <v-text-field
                                            label="Legal first name*"
                                            required
                                        ></v-text-field>
                                      </v-col>
                                      <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                      >
                                        <v-text-field
                                            label="Legal middle name"
                                            hint="example of helper text only on focus"
                                        ></v-text-field>
                                      </v-col>
                                      <v-col
                                          cols="12"
                                          sm="6"
                                          md="4"
                                      >
                                        <v-text-field
                                            label="Legal last name*"
                                            hint="example of persistent helper text"
                                            persistent-hint
                                            required
                                        ></v-text-field>
                                      </v-col>
                                      <v-col cols="12">
                                        <v-text-field
                                            label="Email*"
                                            required
                                        ></v-text-field>
                                      </v-col>
                                      <v-col cols="12">
                                        <v-text-field
                                            label="Password*"
                                            type="password"
                                            required
                                        ></v-text-field>
                                      </v-col>
                                      <v-col
                                          cols="12"
                                          sm="6"
                                      >
                                        <v-select
                                            :items="['0-17', '18-29', '30-54', '54+']"
                                            label="Age*"
                                            required
                                        ></v-select>
                                      </v-col>
                                      <v-col
                                          cols="12"
                                          sm="6"
                                      >
                                        <v-autocomplete
                                            :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
                                            label="Interests"
                                            multiple
                                        ></v-autocomplete>
                                      </v-col>
                                    </v-row>
                                  </v-container>
                                  <small>*indicates required field</small>
                                </v-card-text>
                                <v-card-actions>
                                  <v-spacer></v-spacer>
                                  <v-btn
                                      color="blue darken-1"
                                      text
                                      @click="dialog = false"
                                  >
                                    Close
                                  </v-btn>
                                  <v-btn
                                      color="blue darken-1"
                                      text
                                      @click="dialog = false"
                                  >
                                    Save
                                  </v-btn>
                                </v-card-actions>
                              </v-card>
                            </v-dialog>
                          </v-row>
                        </v-col>
                      </v-row>
                    </v-sheet>

                    <div class="pa-4">
                      <v-item-group :active-class="address_active">
                        <v-container>
                          <v-row>
                            <v-col
                                v-for="n in 5"
                                :key="n"
                                cols="12"
                                md="3"
                            >
                              <v-item v-slot="{ active, toggle }">
                                <v-card
                                    class="d-flex align-center address"
                                    height="104"
                                    width="237"
                                    @click="toggle"
                                >
                                  <v-card-text class="caption">
                                    <div>王鑫（17793399904）</div>
                                    <v-divider/>
                                    闽侯上街溪源宫200号闽江学院17793399904<br/>
                                    <a href="#">修改</a>
                                  </v-card-text>
                                </v-card>
                              </v-item>
                            </v-col>
                          </v-row>
                        </v-container>
                      </v-item-group>
                    </div>
                  </v-sheet>
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>

          <v-container>
            <v-card width="100%">
              <v-card-title>快递选择：</v-card-title>
              <v-divider/>
              <v-card-text>快递？怎么可能有快递。</v-card-text>
            </v-card>
          </v-container>

          <v-container>
            <v-card width="100%">
              <v-card-title>确认订单信息</v-card-title>
              <v-divider/>
              <v-card-text>
                <v-simple-table dense>
                  <thead>
                  <tr>
                    <td>店铺宝贝</td>
                    <td>商品属性</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>优惠方式</td>
                    <td>小计</td>
                  </tr>
                  </thead>
                  <tbody style="background-color: #f2f7ff">
                  <tr>
                    <td width="300">
                      <v-img src="../../assets/msg.png" contain width="50" class="float-left"/>
                      <span class="float-left caption">华为荣耀30手机壳新款荣耀v40</span>
                    </td>
                    <td width="200">
                      <p class="caption">颜色分类：荣耀30青春版 草紫色-幸福时光-收藏送挂绳</p>
                    </td>
                    <td>38.8</td>
                    <td>
                      <v-text-field class="mt-2" dense flat solo-inverted type="number" :rules="[val=>{
                        if(val<1||val>11){
                          return '数量有误！！，最大不能超过10个'
                        }
                      }]"/>
                    </td>
                    <td><p class="caption">省25.50:爆款特卖</p></td>
                    <td><p class="red--text text-h6">12.50</p></td>
                  </tr>

                  <tr>
                    <td width="300">
                      <v-img src="../../assets/msg.png" contain width="50" class="float-left"/>
                      <span class="float-left caption">华为荣耀30手机壳新款荣耀v40</span>
                    </td>
                    <td width="200">
                      <p class="caption">颜色分类：荣耀30青春版 草紫色-幸福时光-收藏送挂绳</p>
                    </td>
                    <td>38.8</td>
                    <td>
                      <v-text-field class="mt-2" dense flat solo-inverted type="number" :rules="[val=>{
                        if(val<1||val>11){
                          return '数量有误！！，最大不能超过10个'
                        }
                      }]"/>
                    </td>
                    <td><p class="caption">省25.50:爆款特卖</p></td>
                    <td><p class="red--text text-h6">12.50</p></td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <v-switch
                          hide-details
                          class="pa-0 ma-0"
                          label="开发票"
                      ></v-switch>
                    </td>
                    <td colspan="4">
                      运送方式：普通配送快递 免邮
                    </td>
                  </tr>
                  <tr>
                    <td colspan="6">
                      <table>
                        <tr>
                          <td width="120">发票类型：</td>
                          <td width="200">增值税纸质普通发票</td>
                        </tr>
                        <tr>
                          <td>发票信息：</td>
                          <td><v-select dense :items="['明细']"></v-select> </td>
                        </tr>
                        <tr>
                          <td> 发票抬头类型：</td>
                          <td>
                            <v-radio-group row>
                              <v-radio  label="个人"></v-radio>
                              <v-radio label="企业"></v-radio>
                            </v-radio-group>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <v-textarea
                          dense
                          class="mt-4"
                          auto-grow
                          filled
                          label="给买家留言"
                          rows="1"
                      ></v-textarea>
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  </tbody>
                </v-simple-table>
              </v-card-text>
            </v-card>
            <br/>
            <br/>
            <div style="width: 100%;" class="text-end">
              <v-btn
                  color="error"
                  outlined
                  @click="e1 = 2"
                  large
              >
                提交订单
              </v-btn>
            </div>

          </v-container>

        </v-stepper-content>

        <v-stepper-content step="2">
          <v-card
              class="mb-12 text-center"
              color="grey lighten-1"
              height="200px"
          >
            <span class="text-h4">支付跳转中！！</span>
          </v-card>

          <div style="width: 100%;" class="text-end">
            <v-btn
                color="error"
                outlined
                @click="e1 = 3"
                large
            >
              提交订单
            </v-btn>
          </div>

        </v-stepper-content>

        <v-stepper-content step="3">
          <v-card
              class="mb-12"
              color="grey lighten-1"
              height="200px"
          ></v-card>

          <v-btn
              color="primary"
              @click="e1 = 4"
          >
            Continue
          </v-btn>

          <v-btn text>
            Cancel
          </v-btn>
        </v-stepper-content>

        <v-stepper-content step="4">
          <v-card
              class="mb-12"
              color="grey lighten-1"
              height="200px"
          ></v-card>

          <v-btn text>
            Cancel
          </v-btn>
        </v-stepper-content>

      </v-stepper-items>
    </v-stepper>
  </v-container>
</template>

<script>
export default {
  name: "OrderDetail",
  data () {
    return {
      e1: 1,
      length: 3,
      window: 0,
      address_active:'address-active',
      dialog: false,
    }
  },
}
</script>

<style scoped>
.address{
  background-image: url(//img.alicdn.com/tps/i2/T1VPiBXvpeXXbjLKQ7-237-106.png);
}
.address-active{
  background: url(//img.alicdn.com/tfs/TB1OVRCRpXXXXaMXFXXXXXXXXXX-237-106.png);
}
</style>
